<template>
  <div>
    <h1>销售出库</h1>
    <br>
    <!--下拉列表-->
    <!--placeholder 提示信息-->
    <span>客户 ：</span>

    <el-select v-model="supplier" placeholder="请选择客户">
      <el-option
          v-for="item in lessonArray"
          :key="item.clientPkId"
          :label="item.clientName"
          :value="item.clientName">
      </el-option>
    </el-select>


    <span style="margin-left: 30px">销售员:{{ userName }}</span>
    <span style="margin-left: 30px">订单总额:{{ price }}</span>
    <span style="margin-left: 30px">送货地址:</span>
    <el-input type="text" v-model="location" style="width: 10%"></el-input>
    <br><br>
    <span>出库物品</span>
    <el-row>
      <el-table :data="goodsList" stripe>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="goodsBrand" label="品牌"></el-table-column>
        <el-table-column prop="salePrice" label="建议零售价"></el-table-column>
        <el-table-column prop="saleAmount"  label="出库数量">
          <template #default="scope">
            <el-input v-model="scope.row.saleAmount" @change="change(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="移除商品">
          <template #default="scope">
            <el-button type="primary" @click="removeItem(scope.row.saleId)">删除商品</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize"
                     background :total="total" @current-change="changeCurPage()"></el-pagination>
    </el-row>
    <br>
    <el-button type="primary" @click="addSQE()">添加商品</el-button>
    <el-button type="primary" @click="put()">出库</el-button>
    <br><br>


    <el-dialog v-model="pick" title="添加" style="width: 1000px">

      <el-row>
        <el-table :data="purchaseInfoList" stripe>
          <el-table-column prop="commodityName" label="商品名称"></el-table-column>
          <el-table-column prop="brand" label="品牌"></el-table-column>
          <el-table-column prop="salePrice" label="采购价"></el-table-column>

          <el-table-column label="添加商品">
            <template #default="scope">
              <el-button type="primary" @click="addGoods(scope.row)">添加商品</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-row>
      <el-button type="primary" @click="determine()">确定</el-button>

    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "SalesIssue",
  created() {
    this.querySale()
    axios.post("/api/user/query", null).then(res => {
      this.userName = res.data

    })

    axios.post("/api/client/selectClientName",null).then(res=>{
      this.lessonArray=res.data
    })

  },
  data() {
    return {
      goodsList: [],
      supplier: '',
      userName: '',
      price: 0,
      pick: false,
      purchaseInfoList:[],
      location:'',
      lessonArray:[]

    }

  }, methods: {
    addSQE() {
      this.pick = true
      axios.post("/api/CommodityRepertory/queryByAll",null).then(res=>{
        this.purchaseInfoList=res.data

      })



    },
    put(){
      let param={
        "clientName":this.supplier,
        "salesman":this.userName,
        "sellPrice":this.price,
        "location":this.location

      }
      if (this.supplier!=null && this.supplier!='' && this.location!=null && this.location!=''){
        axios.post("/api/sale/put",param).then(res=>{
          if (res.data=="ok"){
            ElMessage({
              message: '出库成功',
              type: 'success'
            })
            this.querySale()
          }else if(res.data=="库存不足"){
            ElMessage({
              message: '库存不足',
              type: 'success'
            })
          }else {
            ElMessage({
              message: '出库数量错误',
              type: 'success'
            })
          }
        })
      }else {
        ElMessage({
          message: '请选择客户和填写地址',
          type: 'success'
        })
      }






    },
    removeItem(id){

      axios.get("/api/sale/remove?id="+id,null).then(res=>{

        this.querySale()
      })
    },
    addGoods(scope){

      axios.post("/api/sale/addSale",scope).then(res=>{
        this.querySale()
      })


    },
    determine(){
      this.pick = false
    },
    querySale(){
      this.price = 0;
      axios.post("/api/sale/querySale",null).then(res=>{
        this.goodsList=res.data
        this.goodsList.forEach(c=>{
          this.price+=c.salePrice*c.saleAmount
          console.log(this.price)
        })


      })

    },
    change(scope){

      if (scope.saleAmount>0){
        axios.post("/api/sale/update",scope).then(res=>{
          if (scope.saleAmount>res.data){
            ElMessage({
              message: '库存不足，库存数量为'+res.data,
              type: 'success'
            })


          }
          this.querySale()



        })
      }else {
        this.price=0
        ElMessage({
        message: '数量错误',
        type: 'success'
      })}


    }

  }
}
</script>

<style scoped>

</style>